import React from './react';
import ReactDom from './react-dom';
const style = { border: '3px solid red', margin: '5px' };
const element = (
  <div id="A1" style={style}>
    A1
    <div id="B1" style={style}>
      B1
      <div id="C1" style={style}>
        C1
      </div>
      <div id="C2" style={style}>
        C2
      </div>
    </div>
    <div id="B2" style={style}>
      B2
    </div>
  </div>
);

// ReactDom.render(element, document.getElementById('root2'));

// 实现更新操作
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
btn1.addEventListener('click', () => {
  const element = (
    <div id="A1-new" style={style}>
      A1-new
      <div id="B1-new" style={style}>
        B1-new
        <div id="C1-new" style={style}>
          C1-new
        </div>
        <div id="C2-new" style={style}>
          C2-new
        </div>
      </div>
      <div id="B2-new" style={style}>
        B2-new
      </div>
      <div id="B3">B3</div>
      <div id="B4">B4</div>
    </div>
  );

  ReactDom.render(element, document.getElementById('root2'));
});

btn2.addEventListener('click', () => {
  const element = (
    <div id="A2-new11" style={style}>
      A1-new
      <div id="B1-new11" style={style}>
        B1-new11
        <div id="C1-new" style={style}>
          C1-new111
        </div>
        <div id="C2-new" style={style}>
          C2-new111
        </div>
      </div>
      <div id="B2-new" style={style}>
        B2-new111
      </div>
      <div id="B4">B4</div>
    </div>
  );

  ReactDom.render(element, document.getElementById('root2'));
});

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  onClick = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <div id="counter">
        <span>{this.state.count}</span>
        <button onClick={this.onClick}>+1</button>
      </div>
    );
  }
}

function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return {
        num: state.num + 1,
      };
    default:
      return state;
  }
}
function FuncComponent(props) {
  const [data1, setNumber] = React.useState({ number: 0 });
  const [data, dispatch] = React.useReducer(reducer, { num: 10 });
  console.log('data1');
  console.log(data1);
  return (
    <div id="wrapper">
      <div>{data1.number}</div>
      <button onClick={() => setNumber({ number: data1.number + 1 })}>
        number +1
      </button>
      <div>{data.num}</div>
      <button onClick={() => dispatch({ type: 'add' })}>number +1</button>
      <span>我是函数组件啦</span>
      <p>{props.name}</p>
    </div>
  );
}

// 测试类组件
// ReactDom.render(<Counter/>, document.getElementById('root2'))
ReactDom.render(
  <FuncComponent name={'加油'} />,
  document.getElementById('root2')
);
